import React from "react";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { SubmitBar, Checkbox, ProductCard, Stepper } from "react-vant";
import { addCarCount, modifyAllCarCheck, subCarCount, switchCarCheck } from "../../app/car/carSlice";
import { useAppSelector } from "../../app/hooks";
import { useCar } from "../../hooks";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const car = useAppSelector((state) => state.car.car);
  const loading = useAppSelector((state) => state.car.loading);
  const dispatch = useDispatch();
  const { totalCheckPrice, isAllCheck } = useCar()
  return (
    <div>
      <div>
        {car.map((v) => {
          return (
            <div style={{ display: "flex" }} key={v.id}>
              <div style={{ flexShrink: 0 }}>
                <Checkbox checked={v.isChecked} onChange={ () => dispatch(switchCarCheck(v)) }/>
              </div>
              <div style={{ flex: 1, overflow: 'hidden' }}>
                <ProductCard
                  num={
                    <Stepper
                      value={v.count}
                      min={1}
                      onPlus={() => dispatch(addCarCount(v))}
                      onMinus={() => dispatch(subCarCount(v))}
                    ></Stepper>
                  }
                  price={v.price.toFixed(2)}
                  desc={v.desc}
                  title={v.title}
                  thumb={v.images[0]}
                />
              </div>
            </div>
          );
        })}
      </div>

      <SubmitBar
        price={totalCheckPrice * 100}
        buttonText="提交订单"
        onSubmit={() => navigate("/order")}
      >
        <Checkbox checked={isAllCheck} onChange={(checked) => { dispatch(modifyAllCarCheck(checked)) }}>全选</Checkbox>
      </SubmitBar>
    </div>
  );
};

export default Index;
